<!DOCTYPE html>
<html lang="en">
<head xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>HighJ-STU</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <script src="/js/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="/plugins/bootstraptable/bootstrap-table.min.css">
</head>
<body>
<div class="container-fluid">
    <!--显示栏-->
    <h1 class="text-center">选修课选课系统</h1>
    <div class="btn-group" role="group">
        <form action="/logout">
            <button type="submit" class="btn btn-success">Logout</button>
            <button class="btn btn-primary" type="button" onclick="loadStuTable();">已修课程信息</button>
            <button class="btn btn-primary" type="button" onclick="loadThisSemesterCourseTb();">下期已选课程信息</button>
            <button class="btn btn-primary" type="button" onclick="loadCourseTable();">本期可选课程信息</button>
        </form>
    </div>

    <table class="table table-hover">
        <thead id="courseThead">
        </thead>
        <tbody id="courseTb">
        </tbody>
    </table>

</div>
<script src="/js/bootstrap.min.js"></script>
<script src="/plugins/bootstraptable/bootstrap-table.min.js"></script>
<script src="/plugins/bootstraptable/locale/bootstrap-table-zh-CN.min.js"></script>
<script type="text/javascript">
    //拉取本期已选课程信息
    function loadThisSemesterCourseTb() {
        $.ajax({
            url: '/getthiscourse'//调用后端方法查询本期已选课程
        }).done(function (rs) {
            var len = rs.data.length;
            var html1 = "<tr>"
                +"<th>" + "CID" + "</th>"
                +"<th>"+ "CNAME" + "</th>"
                +"<th>"+ "CLASS" + "</th>"
                +"<th>"+ "CREDITS" +"</th>"
                +"<th>"+ "CPROPERTY" + "</th>"
                +"<th>"+ "CSEMESTER" + "</th>"
                +"</tr>";
            var html2="";
            for (var i = 0; i < len; i++) {
                var item = rs.data[i];
                html2 += "<tr>"
                    + "<td>" + item.cid + "</td>"
                    + "<td>" + item.cname + "</td>"
                    + "<td>" + item.class1 + "</td>"
                    + "<td>" + item.credits + "</td>"
                    + "<td>" + item.cproperty + "</td>"
                    + "<td>" + item.csemester + "</td>"
                    + "<td><a href='#' onclick='deleteCourse(" + item.cid + ");'>Withdrawal this course</a></td>"
                    + "</tr>";
            }
            $("#courseThead").html(html1);
            $("#courseTb").html(html2);
        })
    }
    //拉取已修课程信息
    function loadStuTable() {
        $.ajax({
            url: '/getscore'
        }).done(function (rs) {
            var len = rs.data.length;
            var html1 = "<tr>"
                +"<th>" + "CID" + "</th>"
                +"<th>"+ "CNAME" + "</th>"
                +"<th>"+ "CLASS" + "</th>"
                +"<th>"+ "CREDITS" +"</th>"
                +"<th>"+ "CPROPERTY" + "</th>"
                +"<th>"+ "CSEMESTER" + "</th>"
                +"<th>"+ "SCORE" + "</th>"
                +"</tr>";
            var html2 = "";
            for (var i = 0; i < len; i++) {
                var item = rs.data[i];
                html2 += "<tr>"
                    + "<td>" + item.cid + "</td>"
                    + "<td>" + item.cname + "</td>"
                    + "<td>" + item.class1 + "</td>"
                    + "<td>" + item.credits + "</td>"
                    + "<td>" + item.cproperty + "</td>"
                    + "<td>" + item.csemester + "</td>"
                    + "<td>" + item.score + "</td>"
                    + "</tr>";
            }
            $("#courseThead").html(html1);
            $("#courseTb").html(html2);
        })
    }
    //选择选修课程
    function selectCourse(cid){
        var Data = {
            CID:cid.toString()
        }
        $.ajax({
            url:'/addSC',
            data:Data
        }).done(function (rs) {
            loadCourseTable();
        })
    }
    //退选课程
    function deleteCourse(cid){
        var Data = {
            deleteCID:cid.toString()
        }
        $.ajax({
            url:'/deleteSC',
            data:Data,
            method:"delete"
        }).done(function (rs) {
            loadThisSemesterCourseTb();
        })
    }
    //拉取可选课程
    function loadCourseTable() {
        $.ajax({
            url: '/getcourse'//调用后端方法查询可选课程
        }).done(function (rs) {
            var len = rs.data.length;
            var html1 = "<tr>"
                +"<th>" + "CID" + "</th>"
                +"<th>"+ "CNAME" + "</th>"
                +"<th>"+ "CLASS" + "</th>"
                +"<th>"+ "CREDITS" +"</th>"
                +"<th>"+ "CPROPERTY" + "</th>"
                +"<th>"+ "CSEMESTER" + "</th>"
                +"</tr>";
            var html2 = "";
            for (var i = 0; i < len; i++) {
                var item = rs.data[i];
                html2 += "<tr>"
                    + "<td>" + item.cid + "</td>"
                    + "<td>" + item.cname + "</td>"
                    + "<td>" + item.class1 + "</td>"
                    + "<td>" + item.credits + "</td>"
                    + "<td>" + item.cproperty + "</td>"
                    + "<td>" + item.csemester + "</td>"
                    + "<td><a href='#' onclick='selectCourse(" + item.cid + ");'>select this course</a></td>"
                    + "</tr>";
            }
            $("#courseThead").html(html1);
            $("#courseTb").html(html2);
        })
    }

    $(function () {
        loadStuTable();
    })

</script>
</body>
</html>